<template>
	<view>
		<view class="me">
			<view class="">
				<text>{{info.nickName}}</text>
				<view class="">
					四海香，汇聚天下英雄!
				</view>
			</view>
			<image :src="info.avatarUrl" class="avata"></image>
		</view>
		
	    <!-- 1.页面进入时候，弹窗提示授权 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" 
				title="登录" 
				content="授权微信小程序获取用户图像\昵称"
				:duration="1000" 
				:before-close="true" 
				@close="close" 
				@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				info:{}
			}
		},
		onShow() {
			//6.获取用户信息
		   try{
		   	  let info = uni.getStorageSync("userInfo") ||null;
			  if(info){
				  this.info = info;//已经授权了，保存信息
			  }else{
				  this.$refs.popup.open() //提示授权
			  }
		   }catch(e){
		   	  //TODO handle the exception
		   }
		},
		methods:{
			userInfo(data){
				console.log(data,data.detail.userInfo)
			},
			confirm(){
				//2.同意授权，获取用户信息
				console.log("同意授权,,,")
				/* uni.authorize({}) 以过时*/
				//条件编译，只在微信小程序中生效
				// wx.getUserInfo({
				wx.getUserProfile({
					desc:"登录小微程序",
					success:(res)=>{
						/* 
						 userInfo:{
							 avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/HLvfYRnhoOGhsglYf5vLXY8siaw7qsSSpGfQXwN5FibGkmBEicrVXWySJQJsnUqHnKG7Gtv8sr2u0puo9CUDXVib9w/132"
							 city: ""
							 nickName: "future",
							 ...
						 }
						 */
						console.log(res,res.userInfo)
						//3.等登录成功，保存用户信息到缓存
						let userInfo = res.userInfo||{};
						if(userInfo.nickName && userInfo.avatarUrl){
							uni.setStorageSync('userInfo',userInfo)
						}
						//4.关闭弹窗
						this.$refs.popup.close()
					}
				})
				//
			},
			close(){
				console.log("用户取消了授权,,,")
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="less">
.me{
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	.avata{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
}
</style>